<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			* { margin: 0; padding: 0}
		</style>
	</head>
	<body>
            <script src="../js/three.js"></script>
            <script src="../js/ThreeBSP.js"></script>
		<script>
            /*
            *创建场景对象
            */ 
            let scene = new THREE.Scene();
            /*
            *创建几何体
            */
            let cylinderGeometry = new THREE.CylinderGeometry(50,50,20,200,20);
            let boxGeometry = new THREE.BoxGeometry(60,60,60,50,50);

            // 创建材质
            let materials = new THREE.MeshPhongMaterial({
                color:0x0000ff,
                wireframe:false
            }); // wireframe:false,不查看细分

            // 创建Mesh
            let cylinder = new THREE.Mesh(cylinderGeometry, materials);
            let box = new THREE.Mesh(boxGeometry, materials);

            // 将网格模型对象包装成可以进行buer运算的对象(BSP对象)
            let cylinderBSP = new ThreeBSP(cylinder);
            let boxBSP = new ThreeBSP(box);

            // 球两个BSP对象的并集
            // let result = cylinderBSP.union(boxBSP);

            // 球两个BSP对象的交集
            // let result = cylinderBSP.intersect(boxBSP);

            // 球两个BSP对象的差集
            let result = cylinderBSP.subtract(boxBSP);

            // 将BSP对象转化为Mesh对象
            let mesh = result.toMesh();

            // 重新为mesh赋一个材质
            scene.add(mesh);

            /**
            * 光源设置
            */
            // 点光源
            let point = new THREE.PointLight(0xffffff); // 0xffffff 定义光照强度
            point.position.set(400, 200, 300); // 点光源位置
            scene.add(point); // 点光源添加到场景中
            // 环境光
            let ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
            
            /*
             *相机设置 
            */
            let width = window.innerWidth;
            let height = window.innerHeight;
            let k = width / height; // 窗口宽高比
            let s = 200; // 三维场景缩放系数
           //  let camera = new THREE.OrthographicCamera (-s*k,s*k, s,-s,1,1000); // 正交相机，参数为左边偏移（偏移是相对于相机中心位置，不是坐标）
                                                                              // ，右偏移，上偏移，下偏移，近平面距离、远平面距离
            
            let camera = new THREE.PerspectiveCamera (45, k, 1, 1000); //视角、宽高比、近平面距离、远平面距离
            camera.position.set(100, 100, 100); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

            /*
            * 创建渲染器对象
            */
            let renderer = new THREE.WebGLRenderer({
                antialias:true,  //是否开启反锯齿
            });
            renderer.setSize(width, height);
            renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
            document.body.appendChild( renderer.domElement );// body元素中插入canvas对象
            renderer.render(scene,camera);// 执行渲染操作
		</script>
	</body>
</html>